<template>
  <div style="display:flex;flex-direction:column;width:100%;margin:0;padding:0">
    <div
      style="border:1px solid #eee;margin-left:10px;margin-right:25px;margin-top:50px;line-height:40px;background:#eee;padding-left:20px"
    >生产排班清单</div>
    <div style="margin-left:10px;margin-right:25px;margin-top:10px">
      <!-- 生产排班清单Table表格 -->
      <p-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :scroll="tableScroll"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :customRow="clickThenSelect"
      >
        <template slot="layoutBalance" >
          <a>编辑</a>
        </template>

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
          <img
            v-else
            :src="getImgView(text)"
            height="25px"
            alt="图片不存在"
            style="max-width:80px;font-size: 12px;font-style: italic;"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
          <p-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)"
          >下载</p-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <p-divider type="vertical" />
          <p-dropdown>
            <a class="ant-dropdown-link">
              更多
              <p-icon type="down" />
            </a>
            <p-menu slot="overlay">
              <p-menu-item>
                <p-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </p-popconfirm>
              </p-menu-item>
              <template
                v-if="cgButtonLinkList && cgButtonLinkList.length>0"
                v-for="(btnItem,btnIndex) in cgButtonLinkList"
              >
                <p-menu-item :key=" 'cgbtnLink'+btnIndex " v-if="showLinkButton(btnItem,record)">
                  <a
                    href="javascript:void(0);"
                    @click="cgButtonLinkHandler(record,btnItem.buttonCode,btnItem.optType)"
                  >
                    <p-icon v-if="btnItem.buttonIcon" :type="btnItem.buttonIcon" />
                    {{ btnItem.buttonName }}
                  </a>
                </p-menu-item>
              </template>
            </p-menu>
          </p-dropdown>
        </span>
      </p-table>
    </div>
    <div
    
      style="border:1px solid #eee;margin-left:10px;margin-right:25px;margin-top:20px;line-height:40px;background:#eee;padding-left:20px"
    >排班详情</div>
    <div style="margin-left:10px;margin-right:25px;margin-top:10px">
      <!-- 排班详情Table表格 -->
      <MesMfGenerateTheSchedulingForm :details="details" v-on:handeleChildData="getChildData"></MesMfGenerateTheSchedulingForm>
    </div>
  </div>
</template>

<script>
import MesMfGenerateTheSchedulingForm from "@/components/Privately/MesMfGenerateTheSchedulingForm.vue";

import { postAction, getAction, deleteAction } from "@/api/manage";
// import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import Vue from "vue";

export default {
  // mixins: [JeecgListMixin],
  props:{
    dataInfo:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data() {
    return {
      //Table
      dataSource:[],
      details:[],
      EnhanceJS: "",
      cgButtonLinkList: [],
      cgButtonList: [],
      title: "", //存表名
      groupTag: [],
      queryInfo: [],
      code: "",
      // 表头
      columns: [],
      //列设置
      settingColumns: [],
      //列定义
      defColumns: [
        {
          title: "序号",
          dataIndex: "id",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: "排班日期",
          dataIndex: "layoutTime",
          key: "layoutTime",
          // width: "15%",
          align: "center",
         customRender: function (t) {
            let now = new Date(t);
            let year = now.getFullYear(); //取得4位数的年份
            let month = now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
            let date = now.getDate(); //返回日期月份中的天数（1到31）
            return year + "-" + month + "-" + date;
          },
        },

        {
          title: "班次",
          dataIndex: "classtimename",
          key: "layoutClasses",
          // width: "40%",
          align: "center",
          scopedSlots: { customRender: "layoutClasses" },
        },
        {
          title: "线体",
          dataIndex: "linename",
          key: "lineno",
          // width: "40%",
          align: "center",
          scopedSlots: { customRender: " lineno" },
        },

        {
          title: "工序工单",
          dataIndex: "processbillno",
          key: "empno",
          align: "center",
          scopedSlots: { customRender: "processbillno" },
        },
        {
          title: "产品编码",
          dataIndex: "productcode",
          key:"productcode",
          align: "center",
          scopedSlots: { customRender: "productcode" },
        },
        {
          title: "产品描述",
          dataIndex: "productname",
          key:"",
          align: "center",
          scopedSlots: { customRender: "" },
        },
        
        {
          title: "排产数量",
          dataIndex:"quantity",
          key:"",
          align: "center",
          scopedSlots: { customRender: "" },
        },
        {
          title: "排班状态",
          dataIndex: "layoutState",
          key:"",
          align: "center",
          scopedSlots: { customRender: "" },
           customRender: function (t, r, index) {
            if(t==0){
              return "未排班"
            }else if(t==1){
              return "已排班"
            }
          },
        },
      ],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      url: {
        // list: "/mes-manufacture/mfSurplusManpower/count/available",
        // 排班清单
        getList:"/mes-manufacture/mfProductionLayout"
      },
    };
  },
  created() {
    this.initColumns();
    this.setdefColumns();
  },
  mounted(){
    this.loadData()
  },
  watch:{
    dataInfo(){
      this.loadData()
    }
  },
  components: {
    MesMfGenerateTheSchedulingForm,
  },
  

  methods: {
     // 获取子组件传过来的参数
    getChildData(data){
        this.sentData = data;
        this.data={
          data:this.sentData,
          id:this.dataSource[0].id
        }
        this.$emit("handeleChildData",this.data)
    },
    clickThenSelect(record) {
      return {
        on: {
          click: () => {
            this.onSelectChange(record.id, [record]);
          },
        },
      };
    },
    tableScroll: function () {
      if (this.columns.length > 13) {
        return { x: this.columns.length * 150 - 450 };
      }
    },
    setdefColumns() {
      if (this.columns.length > 13) {
        let arrLength = this.columns.length - 1;
        this.columns.forEach((item, index) => {
          item["width"] = 130;
        });
        this.columns[arrLength]["fixed"] = "right";
        this.columns[0]["fixed"] = "left";
        this.columns[1]["fixed"] = "left";
      }
    },
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

      var key = this.$route.name + ":colsettings";
      let colSettings = Vue.ls.get(key);
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = [];
        this.defColumns.forEach(function (item, i, array) {
          allSettingColumns.push(item.dataIndex);
        });
        this.settingColumns = allSettingColumns;
        this.columns = this.defColumns;
      } else {
        this.settingColumns = colSettings;
        const cols = this.defColumns.filter((item) => {
          if (item.key == "rowIndex" || item.dataIndex == "action") {
            return true;
          }
          if (colSettings.includes(item.dataIndex)) {
            return true;
          }
          return false;
        });
        this.columns = cols;
      }
    },

    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ":colsettings";
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000);
      this.settingColumns = checkedValues;
      const cols = this.defColumns.filter((item) => {
        if (item.key == "rowIndex" || item.dataIndex == "action") {
          return true;
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true;
        }
        return false;
      });
      this.columns = cols;
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
      this.selectedMainId = "";
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedMainId = selectedRowKeys[0];
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    loadData(){
       getAction(this.url.getList+"/"+this.dataInfo.id).then((res) => {
        if(res.code==0){
          this.dataSource=[res.data]
          this.details=res.data
        }else{
          this.$message.warning("生产排版清单获取失败")
        }
       })
    }
    
  },
};
</script>
    
<style scoped lang="less">
.editable-row-operations a {
  margin-right: 8px;
}
</style>